{% extends "base.html" %}

{% block title %}{% if post %}编辑文章{% else %}新建文章{% endif %} - 我的博客{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">
        {% if post %}编辑文章{% else %}新建文章{% endif %}
    </h1>
    
    <form id="postForm" class="bg-white rounded-lg shadow-sm p-6">
        <div class="mb-4">
            <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                标题 *
            </label>
            <input type="text" id="title" name="title" required
                   value="{{ post.title if post else '' }}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        
        <div class="mb-4">
            <label for="tags" class="block text-sm font-medium text-gray-700 mb-2">
                标签（用逗号分隔）
            </label>
            <input type="text" id="tags" name="tags" 
                   value="{{ ','.join(post.tags) if post else '' }}"
                   placeholder="例如：技术,生活,思考"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        
        <div class="mb-4">
            <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
                内容（支持 Markdown 语法）*
            </label>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div>
                    <textarea id="content" name="content" required
                              class="w-full h-96 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                              placeholder="在此输入文章内容...">{{ post.content if post else '' }}</textarea>
                </div>
                <div>
                    <div class="border border-gray-300 rounded-md p-4 h-96 overflow-y-auto">
                        <h3 class="text-sm font-medium text-gray-700 mb-2">预览</h3>
                        <div id="preview" class="prose prose-sm max-w-none"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="flex justify-end space-x-4">
            <a href="{{ url_for('admin') }}" 
               class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                取消
            </a>
            <button type="submit" 
                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                {% if post %}更新文章{% else %}发布文章{% endif %}
            </button>
        </div>
        
        <input type="hidden" id="postId" value="{{ post.id if post else '' }}">
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.bootcdn.net/ajax/libs/marked/4.3.0/marked.min.js"></script>
<script>
// 实时预览
const contentTextarea = document.getElementById('content');
const previewDiv = document.getElementById('preview');

function updatePreview() {
    const content = contentTextarea.value;
    previewDiv.innerHTML = marked.parse(content);
}

contentTextarea.addEventListener('input', updatePreview);
updatePreview(); // 初始渲染

// 表单提交
document.getElementById('postForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const title = document.getElementById('title').value;
    const content = document.getElementById('content').value;
    const tagsText = document.getElementById('tags').value;
    const postId = document.getElementById('postId').value;
    
    const tags = tagsText.split(',')
        .map(tag => tag.trim())
        .filter(tag => tag.length > 0);
    
    const postData = {
        id: postId ? parseInt(postId) : null,
        title: title,
        content: content,
        tags: tags
    };
    
    fetch('/api/posts', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = "{{ url_for('admin') }}";
        }
    });
});
</script>
{% endblock %}
